{extend name="../template@default/forum_public"} {block name="content"}

<div class="mdui-col-xs-12 mdui-col-sm-8 mdui-m-y-1 mdui-typo">
    <div class="mf-panel mdui-shadow-10">
        <header class="mf-panel-hd">
            <h3>{$topicData.subject}
                <br/> {:outBadge($topicData)}
            </h3>
            <a class="mdui-text-color-grey-400" href="{:url('index/user/index',['uid'=>$topicData.uid])}">
                <strong>{$topicUser.username}</strong>
            </a>
            <span title="{$topicData.create_time}"> {$topicData.create_time|time_format} </span>
            <span>
                <i class="mdui-icon material-icons">looks</i>{$topicData.views}</span>
        </header>
        <div class="mf-panel-bd">
            <div class="content" id="mf-content">
                {$topicData.content|raw}
            </div>
        </div>
    </div>

    <div class="mf-panel mdui-shadow-5 mdui-hoverable" id="comment">
        <header class="mf-panel-hd mdui-m-f-2">
            <h3 class="mf-panel-title mdui-m-f-2">回帖
                <button class="mdui-btn mdui-float-right mdui-ripple mdui-color-theme-accent mdui-btn-raised" id="reply">回复</button>
            </h3>

        </header>
        <div class="mf-panel-bd">
            <div id="mf-comments">

            </div>
        </div>
    </div>
</div>
<div class="mdui-col-xs-0 mdui-col-md-4 mdui-m-y-1 mdui-hidden-xs">
    <div class="mf-panel mdui-text-center">
        <header class="mf-panel-hd mdui-color-theme">
            <img src="{$topicUser.avatar}" alt="{$topicUser.username}" class="mdui-img-circle" width="64">
            <br/>
            <a href="{:url('index/user/index',['uid'=>$topicData.uid])}" class="mdui-text-color-white-text">
                <h2>{$topicUser.username}</h2>
            </a>
        </header>
        <div class="mf-panel-bd">
            <table class="mdui-table">
                <thead>
                    <tr>
                        <th width="33.3333%">主题数</th>
                        <th width="33.3333%">回帖数</th>
                        <th>精华数</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{$topicUser.topics}</td>
                        <td>{$topicUser.comments}</td>
                        <td>{$topicUser.essence}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>

<!-- 回复区域 -->
<form class="mdui-hidden" id="replyPanel">
    <div id="editor" class="mdui-hidden">

    </div>
    <input type="hidden" id="content" name="content">
</form>

{/block} {block name="js"}
<script src="__JS__/wangEditor.js"></script>
<script src="__JS__/mltree-flow.js"></script>
<script src="__JS__/mltree-editor.js"></script>
<script>
    var option = {
        uploadImg: "{:url('index/expand/picUpload')}",
        commentUrl: "{:url('index/topic/comment',['tid'=>$topicData.tid])}",
        uid: "{:session('uid')}",
        subject: "{$topicData.subject}",
    }
    //调用flow加载
    var flow = new mfFlow('comment');
    flow.flow('{$topicData.tid}');

    regEditor(type = 'comment', option);

    $$('.mf-btn-reply').on('click', function () {
        var cid = $$(this).data('cid');
        var userName = $$(this).data('username');
        console.log(cid, userName);
        setContent('回复 <a href="javascript:;" onmouseover="reContent(' + cid + ')" onmouseout="layer.closeAll();">@' + userName + '</a>')
        $$('#replyPanel').toggleClass('mdui-hidden');
        var device = layui.device(),
            k = '824px';
        if (device.weixin || device.android || device.ios) {
            k = '100%';
        }
        layer.open({
            type: 1,
            anim: 2,
            title: '回复『' + option.subject + '』',
            area: k,
            offset: 'b',
            btn: '发布',
            content: $('#replyPanel'),
            cancel: function (index, layero) {
                $$('#replyPanel').toggleClass('mdui-hidden');
            },
            yes: function (index, layero) {
                var data = $$('#replyPanel').serialize();
                layer.close(index);
                $$.ajax({
                    method: 'post',
                    url: option.commentUrl,
                    data: data,
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                        if (res.code == 1) {
                            mdui.snackbar({
                                message: res.message,
                                position: 'top',
                                onClosed: function () {

                                    location.reload();
                                }
                            })
                        } else {
                            mdui.snackbar({
                                message: '阿偶？出错了。<br/>' + res.message,
                                position: 'top',
                            })
                        }
                    }
                });
            }
        });
    });

</script>{/block}